<template>
  <div>
    <h1>我的订单</h1>
    <div class="table-wrapper">
      <el-table ref="multipleTable" :data="orderList" tooltip-effect="dark" style="width: 100%;" align="center">
        <el-table-column prop="orderId" label="订单编号"  width="90" align="center"></el-table-column>
<!--        <el-table-column prop="userId" label="付款者编号"  width="90" align="center"></el-table-column>-->
        <el-table-column prop="userAccount" label="付款者账号"  width="120" align="center"></el-table-column>
        <el-table-column prop="userName" label="付款者昵称"  width="100" align="center"></el-table-column>
<!--        <el-table-column prop="activateUserId" label="购买者编号"  width="90" align="center"></el-table-column>-->
        <el-table-column prop="activateUserAccount" label="购买者账号"  width="120" align="center"></el-table-column>
        <el-table-column prop="activateUserName" label="购买者昵称"  width="100" align="center"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="100" align="center" :formatter="convertStatus"></el-table-column>
        <el-table-column prop="orderCount" label="订购数量" width="80" align="center"></el-table-column>
        <el-table-column prop="orderTotal" label="支付金额" width="80" align="center"></el-table-column>
        <el-table-column prop="orderCreateTime" label="订单创建时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <el-col align="left">
              <el-link style="margin-left: 5px;width: 80px" :underline="false" @click="handleLook(scope.row)">查看
              </el-link>
            </el-col>
            <el-col align="left">
              <el-link style="margin-left: 5px;width: 80px" :underline="false" @click="handleDelete(scope.row)">删除
              </el-link>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--  音乐订单详情对话框   -->
      <el-dialog :title="title" :visible.sync="orderMusicFormVisible">
        <el-descriptions :column="4">
          <el-descriptions-item label="订单编号" :span="4">{{order.orderId}}</el-descriptions-item>
          <el-descriptions-item label="订单创建时间" >{{order.orderCreateTime}}</el-descriptions-item>
          <el-descriptions-item label="购买数量" >{{order.orderCount}}</el-descriptions-item>
          <el-descriptions-item label="订单总价" >{{order.orderTotal}}</el-descriptions-item>
          <el-descriptions-item label="订单状态" >{{order.orderStatus}}</el-descriptions-item>

          <el-descriptions-item label="付款者编号" :span="2">{{order.userId}}</el-descriptions-item>
          <el-descriptions-item label="付款账号">{{order.userAccount}}</el-descriptions-item>
          <el-descriptions-item label="付款昵称">{{order.userName}}</el-descriptions-item>
          <el-descriptions-item label="购买者编号" :span="2">{{order.activateUserId}}</el-descriptions-item>
          <el-descriptions-item label="购买账号">{{order.activateUserAccount}}</el-descriptions-item>
          <el-descriptions-item label="购买昵称">{{order.activateUserName}}</el-descriptions-item>
        </el-descriptions>
        <el-form>
          <el-form-item>
            <el-table ref="multipleTable" :data="musicList" tooltip-effect="dark" style="width: 100%;">
              <el-table-column prop="musicId" label="音乐编号" width="170" align="center"></el-table-column>
              <el-table-column prop="musicName" label="音乐名称" width="120" align="center"></el-table-column>
              <el-table-column prop="singerName" label="歌手姓名" width="320" align="center"></el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="orderMusicFormVisible=false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import orderStatus from "@/utils/orderStatus";

export default {
  name: 'OrderView',
  data() {
    return {
      orderList: [],    //我的订单列表
      title: '',
      orderMusicFormVisible: false,
      orderMusicList:[  //订单详情列表
      ],
      order: {          //修改,新增,查看详情
        orderId:0,
        userId:0,
        userName:'',
        userAccount: '',
        activateUserId:0,
        activateUserName:'',
        activateUserAccount:'',
        orderStatus:'',
        orderCount: 0,
        orderDelete: 0,
        orderTotal: 0,
        orderCreateTime: ''
      },
      musicList:[],     //订单详情音乐列表

      orderStatus: orderStatus
    }
  },
  methods: {
    findOrder() {
      request({
        url: '/order/order/web/find',
        method: 'GET',
      }).then(response => {
        if (response.code === 200) {
          this.orderList = response.data;
        }
      })
    },
    handleLook(row) {
      this.orderMusicFormVisible = true
      this.title = '查看订单信息'
      this.order.orderId = row.orderId
      this.order.userId = row.userId
      this.order.userName = row.userName
      this.order.userAccount = row.userAccount
      this.order.activateUserId = row.activateUserId
      this.order.activateUserName = row.activateUserName
      this.order.activateUserAccount = row.activateUserAccount
      this.order.orderStatus = row.orderStatus
      this.getStatus(row.orderStatus)
      this.order.orderCount = row.orderCount
      this.order.orderDelete = row.orderDelete
      this.order.orderTotal = row.orderTotal
      this.order.orderCreateTime = row.orderCreateTime

      request({
        url: '/order/ordermusic/web/find',
        method: 'get',
        params: {
          orderId: row.orderId
        }, // 传递订单数据
      }).then(response => {
        if (response.code === 200) {
          this.musicList = response.data
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将删除订单且不可退回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: '/order/order/web/delete',
          method: 'DELETE',
          data: row, // 传递订单数据
        }).then(response => {
          if (response.code === 200) {
            this.findOrder()
            this.$message({
              type: 'success',
              message: '删除成功！',
            });
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败，请重试',
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    getStatus(status){
      for (let i = 0; i < orderStatus.length; i++) {
        if(orderStatus[i].order_status==status){
          this.order.orderStatus=orderStatus[i].status_name
        }
      }
    },
    /** 订单状态 */
    convertStatus(row, column, cellValue){
      for (let i = 0; i < orderStatus.length; i++) {
        if(cellValue==orderStatus[i].order_status){
          return orderStatus[i].status_name;
        }
      }
    },
  },
  created() {
    this.findOrder();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.login-box {
  margin: 32% auto;
  width: 400px;
  padding: 50px 50px 40px 30px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

.login-box:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.login {
  background-image: url("https://t.alcy.cc/ycy");
  background-size: cover;
}

.table-wrapper {
  margin: 20px 130px;
  padding: 0 100px;
}

</style>
